<template>
	<a-flex gap="5" align="center" vertical style="width: 98%;">
		<a-flex gap="middle" align="start" justify="start" style="width: 100%;">
			<a-form layout="inline">
				<a-form-item label="Username" name="username" :rules="[{ required: true, message: 'Please input your username!' }]">
					<a-input ><template #prefix><i-system-uicons:user-male-circle /></template></a-input>
				</a-form-item>
				<a-form-item  label="Password"   name="password"  :rules="[{ required: true, message: 'Please input your password!' }]">
				      <a-input-password ></a-input-password>
				</a-form-item>
				<a-form-item>
					<a-button :disabled="disabled" type="primary" html-type="submit">Log in</a-button>
				</a-form-item>
			</a-form>
		</a-flex>

		<a-flex>
			<DataCollection :columns="metadate.columns" 
				:loading="$demoStore.loading"
				:dataGrid="$demoStore.dataGrid" 
				:page="$demoStore.paging.page"  
				:pageCount="$demoStore.paging.pageCount" 
				:pageSize="$demoStore.paging.pageSize"
				:itemCount="$demoStore.paging.itemCount"
			>	
				<template #header>
					<XIcon icon="system-uicons:plus" size="25" color="red" />
				</template>
				<template #action="{key, record}">
					{{record.title}}
				</template>
			</DataCollection>
		</a-flex>
	</a-flex>
</template>

<script setup>
	import {reactive, computed, onMounted} from 'vue';
	import DataCollection from '@/components/DataCollection.vue'
	import XIcon  from '@/components/XIcon.vue';
	import metadate from '@/meta/demo.js'
	
	import { demoStore } from '@/stores/demo.js'
	
	const $demoStore = demoStore();
	
	onMounted(()=>{
		$demoStore.dataQuery();
		console.log("page1====> onMounted");
	});
</script>

<style scoped>
</style>